<html>

<head>
  <title>Открытка на 8-е марта</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta name="description" content="Здесь сюрприз, заходи <3" />
  <style>
    @keyframes moveGradient {
      0% {
        background-position: 0% 0%;
      }

      100% {
        background-position: 100% 0%;
      }
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(100vh - 20px);
      background: linear-gradient(45deg,
          rgba(207, 159, 255, 0.8),
          rgba(255, 105, 180, 0.75),
          rgba(255, 192, 203, 0.9));
      background-size: 200% 200%;
      animation: moveGradient 10s ease-in-out infinite alternate;
    }

    #c {
      z-index: 1;
    }

    .help {
      color: #eee;
      z-index: 0;
      position: absolute;
      background-color: coral;
      top: 65%;
      padding: 10px;
      border-radius: 5px;
      font-size: 2em;
      margin-block-start: 0.67em;
      margin-block-end: 0.67em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      opacity: 0.3;
    }

    .clicker {
      display: inline-block;
      width: 200px;
      z-index: 1;
      aspect-ratio: 1;
      background-size: 200px;
      /* image in base64 | https://www.base64-image.de/ */
      background-image: url('');
      background-clip: content-box;
      transition: transform 0.3s ease;
    }

    .clicker:hover {
      transform: scale(1.2);
    }

    .clicker.clicked {
      transform: scale(1.3);
    }

    .invitation,
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    h1 {
      position: absolute;
      z-index: 2;
      color: #eee;
      transition: color 1s ease-in-out;
      font-size: 8em;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: default;
      opacity: 0;
    }

    h2 {
      position: absolute;
      z-index: 2;
      margin-top: 200pt;
      color: #eee;
      transition: color 1s ease-in-out;
      font-size: 4.3em;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: default;
      opacity: 0;
    }

    p {
      position: absolute;
      margin-top: 300pt;
      color: #eee;
      transition: color 1s ease-in-out;
      font-size: 3em;
      opacity: 0;
      z-index: 2;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      pointer-events: none;
      z-index: -2;
    }

    .prevent-select {
      -webkit-user-select: none;
      /* Safari */
      -ms-user-select: none;
      /* IE 10 and IE 11 */
      user-select: none;
      /* Standard syntax */
    }

    @media (max-width: 600px) {

      h1 {
        font-size: 2.8em;
      }

      h2 {
        font-size: 2.3em;
      }

      p {
        font-size: 1em;
      }
    }


    .d-none {
      display: none !important;
    }
  </style>
</head>

<body>
  <div class="center">
    <div class="clicker" onclick="toggle(this)"></div>
    <div class="help prevent-select d-none"></div>
  </div>
  <div class="invitation">
    <canvas width="500" height="500" id="c"> </canvas>
    <h1 class="sign d-none prevent-select">Любимая ❤️</h1>
    <h2 class="sign d-none prevent-select">Приглашаю тебя в ресторан Царь-Гвидон!</h2>
    <p class="sign d-none prevent-select">Таганская 16, 19:00</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@latest"></script>
  <script>
    let clickedTimes = 0;

    function toggle(element) {
      element.classList.toggle("clicked");
      if (element.classList.contains("clicked")) {
        clickedTimes += 1;
        createConfetti();
        if (clickedTimes == 10) {
          document
            .getElementsByClassName("clicker")
            .item(0)
            .classList.add("d-none");
        }
      } else {
      }
    }

    function createConfetti() {
      // Create a canvas element and get its context
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      const emojiShapes = [
        confetti.shapeFromText({
          text: "💋",
          scalar: 3,
        }),
        confetti.shapeFromText({
          text: "🌸",
          scalar: 3,
        }),
        confetti.shapeFromText({
          text: "❤️",
          scalar: 3,
        }),
        confetti.shapeFromText({
          text: "🌺",
          scalar: 3,
        })
      ]

      confetti({
        particleCount: 225, // You can change the number of confetti particles
        scalar: 3, // Make it a bit larger
        angle: 90, // You can change the angle of the confetti launch
        spread: 360, // You can change the spread of the confetti launch
        startVelocity: 25, // You can change the initial velocity of the confetti particles
        decay: 0.95, // You can change the decay rate of the confetti particles
        shapes: emojiShapes, // You can pass an array of shapes to use as confetti particles
        origin: { x: 0.5, y: 0.4 }, // You can change the origin of the confetti launch
        zIndex: -1, // You can change the z-index of the confetti canvas
      });
    }

    var c = document.getElementById("c");
    var _ = c.getContext("2d");
    var opacityStep = 0.05;
    var RAD = Math.PI / 180;
    var speed = 3;
    var setCanvasSize = function () {
      c.width = window.innerWidth;
      c.height = window.innerHeight;
    };
    var randclicker = function () {
      return ["💐", "🌷", "🌹", "🌻", "🌼", "🌸", "🌺", "🪻", "⭐️", "💥", "🍌", "🦄"][Math.floor(Math.random() * 12)];
    };
    var Sprite = function (x, y, rot) {
      this.x = x || Math.random() * c.width;
      this.y = y || Math.random() * c.height;
      this.rot = rot || 0;
      this.c = "rgba(238,85,85,1)";
      this.text = randclicker();
    };
    var items = [new Sprite()];
    var shape = function (x, y, text, c) {
      _.font = "5em Arial";
      _.fillStyle = c;
      _.fillText(text, x, y);
    };
    var clear = function () {
      _.clearRect(0, 0, c.width, c.height);
    };
    var listen = function () {
      window.onresize = function () {
        setCanvasSize();
      };
      window.onmousedown = function (e) {
        if (clickedTimes < 10) return;
        items.push(new Sprite(e.x, e.y));

        clickedTimes += 1;

        if (clickedTimes > 20) {
          document.querySelector('.help').classList.add("d-none");
          document.querySelectorAll(".sign").forEach(function (el) {
            el.classList.remove("d-none");
            curOpacity = el.style.opacity;
            if (curOpacity > 1) return;
            el.style.opacity = Number(curOpacity) + opacityStep;
          });
        }
      };
    };

    var hasTouchScreen = false;
    if ("maxTouchPoints" in navigator) {
      hasTouchScreen = navigator.maxTouchPoints > 0;
    }

    var action = {
      "click1": hasTouchScreen == true ? "Тапай" : "Кликай",
      "click2": hasTouchScreen == true ? "тапать" : "кликать"
    }

    var help = function () {
      var helpText = document.querySelector('.help')
      setInterval(function () {
        if (clickedTimes < 1) {
          helpText.classList.remove("d-none");
          helpText.innerHTML = action["click1"] + " на цветок";
        }
        if (clickedTimes >= 1 && clickedTimes < 5) {
          helpText.classList.remove("d-none");
          helpText.innerHTML = action["click1"] + ' ещё';
        }

        if (clickedTimes >= 5 && clickedTimes < 10) {
          helpText.classList.remove("d-none");
          helpText.innerHTML = action["click1"] + ' ещё больше';
        }

        if (clickedTimes >= 10 && clickedTimes < 20) {
          helpText.classList.remove("d-none");
          helpText.innerHTML = 'Продолжай ' + action["click2"];
        }
      }, 5000)
    };

    var setup = function () {
      setCanvasSize();
      listen();
      help();
    };

    setup();

    var render = function () {
      clear();
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        shape(item.x, item.y, item.text, item.c);
        item.x +=
          Math.cos(Math.round(Math.random() * item.rot) / RAD) * speed;
        item.y +=
          Math.sin(Math.round(Math.random() * item.rot) / RAD) * speed;
        item.rot += speed;
        if (item.y >= c.height || item.y <= 0) item.y = -item.y;
        if (item.x >= c.width || item.x <= 0) item.x = -item.x;
      }
    };

    window.requestAnimFrame = (function () {
      return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60);
        }
      );
    })();

    (function animloop() {
      requestAnimFrame(animloop);
      render();
    })();
  </script>
</body>

</html>